<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		button {
			background: none;
			border: 0;
			box-sizing: border-box;
			margin: 1em;
			padding: 1em 2em;
			box-shadow: inset 0 0 0 2px #f45e61;
			color: #f45e61;
			font-size: inherit;
			font-weight: 700;
			position: relative;
			vertical-align: middle;
		}

		button::before,
		button::after {
			box-sizing: inherit;
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
		}

		.draw {
			transition: color 0.25s;
		}

		.draw::before,
		.draw::after {
			border: 2px solid transparent;
			width: 0;
			height: 0;
		}

		.draw::before {
			top: 0;
			left: 0;
		}

		.draw::after {
			bottom: 0;
			right: 0;
		}

		.draw:hover {
			color: #60daaa;
		}

		.draw:hover::before,
		.draw:hover::after {
			width: 100%;
			height: 100%;
		}

		.draw:hover::before {
			border-top-color: #60daaa;
			border-right-color: #60daaa;
			transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
		}

		.draw:hover::after {
			border-bottom-color: #60daaa;
			border-left-color: #60daaa;
			transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
		}

		.meet:hover {
			color: #fbca67;
		}

		.meet::after {
			top: 0;
			left: 0;
		}

		.meet:hover::before {
			border-top-color: #fbca67;
			border-right-color: #fbca67;
		}

		.meet:hover::after {
			border-bottom-color: #fbca67;
			border-left-color: #fbca67;
			transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;
		}

		.center:hover {
			color: #6477b9;
		}

		.center::before,
		.center::after {
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			transform-origin: center;
		}

		.center::before {
			border-top: 2px solid #6477b9;
			border-bottom: 2px solid #6477b9;
			transform: scale3d(0, 1, 1);
		}

		.center::after {
			border-left: 2px solid #6477b9;
			border-right: 2px solid #6477b9;
			transform: scale3d(1, 0, 1);
		}

		.center:hover::before,
		.center:hover::after {
			transform: scale3d(1, 1, 1);
			transition: transform 0.5s;
		}

		.spin {
			width: 5em;
			height: 5em;
			padding: 0;
		}

		.spin:hover {
			color: #0eb7da;
		}

		.spin::before,
		.spin::after {
			top: 0;
			left: 0;
		}

		.spin::before {
			border: 2px solid transparent;
		}

		.spin:hover::before {
			border-top-color: #0eb7da;
			border-right-color: #0eb7da;
			border-bottom-color: #0eb7da;
			transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
		}

		.spin::after {
			border: 0 solid transparent;
		}

		.spin:hover::after {
			border-top: 2px solid #0eb7da;
			border-left-width: 2px;
			border-right-width: 2px;
			transform: rotate(270deg);
			transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
		}

		.circle {
			border-radius: 100%;
			box-shadow: none;
		}

		.circle::before,
		.circle::after {
			border-radius: 100%;
		}

		.thick {
			color: #f45e61;
		}

		.thick:hover {
			color: #fff;
			font-weight: 700;
		}

		.thick::before {
			border: 2.5em solid transparent;
			z-index: -1;
		}

		.thick::after {
			mix-blend-mode: color-dodge;
			z-index: -1;
		}

		.thick:hover::before {
			background: #f45e61;
			border-top-color: #f45e61;
			border-right-color: #f45e61;
			border-bottom-color: #f45e61;
			transition: background 0s linear 0.4s, border-top-color 0.15s linear, border-right-color 0.15s linear 0.15s, border-bottom-color 0.15s linear 0.25s;
		}

		.thick:hover::after {
			border-top: 2.5em solid #f45e61;
			border-left-width: 2.5em;
			border-right-width: 2.5em;
		}

		html {
			background: #fefefe;
		}

		.buttons {
			isolation: isolate;
		}
	</style>
	<body>
		<section class="buttons">
			<button class="draw">Draw</button>

			<button class="draw meet">Draw Meet</button>

			<button class="center">Center</button>

			<button class="spin">Spin</button>

			<button class="spin circle">Spin Circle</button>

			<button class="spin thick">Spin Thick</button>
		</section>
	</body>
</html>
